<template>
  <view class="my-container">
    <!-- 用户信息区域 -->
    <view class="user-info-section">
      <view class="user-info">
        <view class="user-details">
          <text class="username">{{ userInfo.username || '未登录' }}</text>
          <text class="user-id">ID: {{ userInfo._id || '--' }}</text>
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view class="function-group">
        <!-- 管理员专属功能 -->
        <template v-if="isAdmin">
          <view class="function-item" @tap="handleItemClick('addUser')">
            <view class="item-left">
              <uv-icon name="plus" size="40rpx" color="#19be6b" />
              <text class="item-text">新增用户</text>
            </view>
            <uv-icon name="arrow-right" size="32rpx" color="#999" />
          </view>
          <view class="function-item" @tap="handleItemClick('userManage')">
            <view class="item-left">
              <uv-icon name="setting" size="40rpx" color="#ff9900" />
              <text class="item-text">用户管理</text>
            </view>
            <uv-icon name="arrow-right" size="32rpx" color="#999" />
          </view>
        </template>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section" v-if="userInfo._id">
      <uv-button text="退出登录" type="error" @click="handleLogout" />
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const userInfo = ref({})

// 判断是否为管理员
const isAdmin = computed(() => {
  return userInfo.value.username == 'root' && 
         userInfo.value.user_type == 'root' && 
         userInfo.value.status == 1
})

// 处理列表项点击
const handleItemClick = (type) => {
  switch(type) {
    case 'addUser':
      uni.navigateTo({
        url: '/pagesUser/userAdd/index'
      })
      break
    case 'userManage':
      uni.navigateTo({
        url: '/pagesUser/userManage/index'
      })
      break
  }
}

onMounted(() => {
  getUserInfo()
})

// 获取用户信息
const getUserInfo = () => {
  const storedUserInfo = uni.getStorageSync('userInfo')
  console.log(storedUserInfo,"当前用户信息");
  if (storedUserInfo) {
    userInfo.value = storedUserInfo
  }
}
// 处理退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.removeStorageSync('userInfo')
        uni.redirectTo({
          url: '/pages/login/index'
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.my-container {
  height: 100%;
  background-color: #f5f5f5;
  overflow: hidden;

  .user-info-section {
    background: linear-gradient(260deg, #98C7F9 0%, #54D3ED 100%);
    padding: 40rpx 30rpx;
    
    .user-info {
      display: flex;
      align-items: center;
      
      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        margin-right: 30rpx;
        border: 4rpx solid rgba(255, 255, 255, 0.4);
      }
      
      .user-details {
        flex: 1;
        
        .username {
          font-size: 36rpx;
          color: #fff;
          font-weight: bold;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .user-id {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }

  .function-list {
    margin-top: 20rpx;
    
    .function-group {
      background-color: #fff;
      
      .function-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx;
        border-bottom: 2rpx solid #f5f5f5;
        
        .item-left {
          display: flex;
          align-items: center;
          
          .item-text {
            margin-left: 20rpx;
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }
  }

  .logout-section {
    margin: 60rpx 30rpx;
  }
}
</style>
